<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta name="description" content="">
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<title>公会列表</title>
	<script type="text/javascript" src="js/adapter.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/Tool.js"></script>
	<script type="text/javascript" src="js/echo.min.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<link rel="stylesheet" href="css/GuildList.css" />
	<link rel="stylesheet" href="css/Public.css" />
</head>

<body style="background-color: #f5f5f5">
	<div class="contents" id="contents" style="height: unset;position: unset">
		<!-- <div class="li frist">
			<div class="photo"><img src="image/photo.png"></div>
			<div class="Name">
				<div class="NameTit">个性的公会名</div>
				<div class="Num">
					<div class="popleNum">520</div>
					<div class="IdNum">ID:<span>20190010</span></div>
				</div>
			</div>
			<div class="btn">申请</div>
		</div>
		<div class="li">
			<div class="photo"><img src="image/photo.png"></div>
			<div class="Name">
				<div class="NameTit">个性的公会名</div>
				<div class="Num">
					<div class="popleNum">520</div>
					<div class="IdNum">ID:<span>20190010</span></div>
				</div>
			</div>
			<div class="btn">申请</div>
		</div> -->
	</div>
	<div><span style="text-align: center;width: 100%;display: block;font-size: 14px;color:grey;margin-top: 15px;">暂无更多数据</span></div>
	<script type="text/javascript">

		var page = 0;
		var isLoadedAll = false;
		var isRefreshing = false;

		/// 延迟加载图片
		echo.init({
			offset: 100,
			throttle: 250,
			unload: false
		});

		/// 监听 scroll bottom
		window.addEventListener('scroll', () => {
			var clientHeight = document.documentElement.clientHeight || window.innerHeight; // 可视区域高度
			var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 滚动高度
			var offsetHeight = document.body.offsetHeight || document.documentElement.offsetHeight; // 文档高度

			if ((clientHeight + scrollHeight) >= (offsetHeight - 100)) {
				if (isLoadedAll == false) {
					loadData();
				}
			}
		});

		/// 加载数据
		function loadData() {

			if (isRefreshing) {
				return;
			}

			isRefreshing = true
			page++;

			tokeninit(function () {
				$.ajax({
					headers: {
						"XX-Token": localStorage.getItem("XX-Token"),
						"XX-Device-Type": localStorage.getItem("XX-Device-Type")
					},
					url: localStorage.getItem("domain") + 'app/guild/guildlist',
					type: "post",
					data: { page: page },
					dataType: 'json',
					cache: false,
					async: true,
					success: function (res) {
						if (res.code == 1) {
							loadMoreUI(res.data.list);
						} else {
							isRefreshing = false;
							layer.msg(res.msg);
						}
					},
					error: function () {
						isRefreshing = false;
						layer.msg('网络异常');
					}
				});
			});

		};

		function loadMoreUI(list) {

			for (obj in list) {
				var str = '';
				if (obj == 0) {
					str += '<div class="li frist">';
				} else if (obj == 1) {
					str += '<div class="li two">';
				} else if (obj == 2) {
					str += '<div class="li three">';
				} else {
					str += '<div class="li">';
				}
				str += '<div class="photo"><img src="' + list[obj]['icon'] + '" data-echo="' + list[obj]['icon'] + '"/></div>';

				var nameTit = '<div class="NameTit">' + list[obj]['name'] + '</div>';
				var num = '<div class="Num">' +
					'<div class="popleNum">' + list[obj]['usernum'] + '</div>' +
					'<div class="IdNum">ID:<span>' + list[obj]['id'] + '</span></div>' +
					'</div>'

				str += '<div class="Name">' + nameTit + num + '</div>';

				str += '<a href="SignGuild.html?guild_id=' + list[obj]['id'] + '"><div class="btn" data-id="' + list[obj]['id'] + '">' + '申请' + '</div></a>';
				str += '</div>';

				$("#contents").append(str);
			};

			/// 判断加载出来的一页数据大于5条才会有加载更多
			if (list.length < 10) {
				isLoadedAll = true;
			}

			isRefreshing = false;
		};

		loadData();
	</script>
</body>

</html>